mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: cannot change the state if it's the only state in group (#1358)
* fixed loohole with groups and added tooltip * muted text when dropdown disabled
This commit is contained in:
parent
3f22ccc528
commit
5914240290
@ -15,7 +15,7 @@ import stateService from "services/state.service";
|
|||||||
// hooks
|
// hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// ui
|
// ui
|
||||||
import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
|
import { CustomSelect, Input, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
|
||||||
// types
|
// types
|
||||||
import type { ICurrentUserResponse, IState, IStateResponse } from "types";
|
import type { ICurrentUserResponse, IState, IStateResponse } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
@ -28,6 +28,7 @@ type Props = {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
selectedGroup: StateGroup | null;
|
selectedGroup: StateGroup | null;
|
||||||
user: ICurrentUserResponse | undefined;
|
user: ICurrentUserResponse | undefined;
|
||||||
|
groupLength: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
|
export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
|
||||||
@ -43,6 +44,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
|||||||
onClose,
|
onClose,
|
||||||
selectedGroup,
|
selectedGroup,
|
||||||
user,
|
user,
|
||||||
|
groupLength,
|
||||||
}) => {
|
}) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query;
|
const { workspaceSlug, projectId } = router.query;
|
||||||
@ -174,9 +176,8 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
|||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<>
|
<>
|
||||||
<Popover.Button
|
<Popover.Button
|
||||||
className={`group inline-flex items-center text-base font-medium focus:outline-none ${
|
className={`group inline-flex items-center text-base font-medium focus:outline-none ${open ? "text-brand-base" : "text-brand-secondary"
|
||||||
open ? "text-brand-base" : "text-brand-secondary"
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
{watch("color") && watch("color") !== "" && (
|
{watch("color") && watch("color") !== "" && (
|
||||||
<span
|
<span
|
||||||
@ -228,22 +229,27 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
|||||||
name="group"
|
name="group"
|
||||||
control={control}
|
control={control}
|
||||||
render={({ field: { value, onChange } }) => (
|
render={({ field: { value, onChange } }) => (
|
||||||
<CustomSelect
|
<Tooltip tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"} >
|
||||||
value={value}
|
<div>
|
||||||
onChange={onChange}
|
<CustomSelect
|
||||||
label={
|
disabled={groupLength === 1}
|
||||||
Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
|
value={value}
|
||||||
? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
|
onChange={onChange}
|
||||||
: "Select group"
|
label={
|
||||||
}
|
Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
|
||||||
input
|
? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
|
||||||
>
|
: "Select group"
|
||||||
{Object.keys(GROUP_CHOICES).map((key) => (
|
}
|
||||||
<CustomSelect.Option key={key} value={key}>
|
input
|
||||||
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
|
>
|
||||||
</CustomSelect.Option>
|
{Object.keys(GROUP_CHOICES).map((key) => (
|
||||||
))}
|
<CustomSelect.Option key={key} value={key}>
|
||||||
</CustomSelect>
|
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
|
||||||
|
</CustomSelect.Option>
|
||||||
|
))}
|
||||||
|
</CustomSelect>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -54,7 +54,7 @@ const CustomSelect = ({
|
|||||||
) : (
|
) : (
|
||||||
<Listbox.Button
|
<Listbox.Button
|
||||||
className={`flex w-full ${
|
className={`flex w-full ${
|
||||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
|
disabled ? "cursor-not-allowed text-brand-secondary" : "cursor-pointer hover:bg-brand-surface-2"
|
||||||
} items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
|
} items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
|
||||||
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||||
} ${
|
} ${
|
||||||
|
@ -98,6 +98,7 @@ const StatesSettings: NextPage = () => {
|
|||||||
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
|
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
|
||||||
{key === activeGroup && (
|
{key === activeGroup && (
|
||||||
<CreateUpdateStateInline
|
<CreateUpdateStateInline
|
||||||
|
groupLength={orderedStateGroups[key].length}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setActiveGroup(null);
|
setActiveGroup(null);
|
||||||
setSelectedState(null);
|
setSelectedState(null);
|
||||||
@ -128,6 +129,7 @@ const StatesSettings: NextPage = () => {
|
|||||||
setActiveGroup(null);
|
setActiveGroup(null);
|
||||||
setSelectedState(null);
|
setSelectedState(null);
|
||||||
}}
|
}}
|
||||||
|
groupLength={orderedStateGroups[key].length}
|
||||||
data={
|
data={
|
||||||
statesList?.find((state) => state.id === selectedState) ?? null
|
statesList?.find((state) => state.id === selectedState) ?? null
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user