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

feat: randomize color on label create (#1839)

Browse Source 
fix: create label state being persisted after edit label
This commit is contained in:
Dakshesh Jain 2023-08-11 17:42:47 +05:30 committed by GitHub
parent cd5e5b96da
commit 7becec4ee9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 199 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/app/components/labels/create-label-modal.tsx
View File

@ -20,6 +20,7 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
import type { ICurrentUserResponse, IIssueLabels, IState } from "types";
// constants
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
// types
type Props = {
@ -52,10 +53,15 @@ export const CreateLabelModal: React.FC<Props> = ({
watch,
control,
reset,
setValue,
} = useForm<IIssueLabels>({
defaultValues,
});
useEffect(() => {
if (isOpen) setValue("color", getRandomLabelColor());
}, [setValue, isOpen]);
const onClose = () => {
handleClose();
reset(defaultValues);
@ -156,6 +162,7 @@ export const CreateLabelModal: React.FC<Props> = ({
render={({ field: { value, onChange } }) => (
<TwitterPicker
color={value}
colors={LABEL_COLOR_OPTIONS}
onChange={(value) => {
onChange(value.hex);
close();

51
apps/app/components/labels/create-update-label-inline.tsx
View File

@ -22,12 +22,14 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
import { IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
type Props = {
labelForm: boolean;
setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
isUpdating: boolean;
labelToUpdate: IIssueLabels | null;
onClose?: () => void;
};
const defaultValues: Partial<IIssueLabels> = {
@ -35,12 +37,10 @@ const defaultValues: Partial<IIssueLabels> = {
color: "rgb(var(--color-text-200))",
};
type Ref = HTMLDivElement;
export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
function CreateUpdateLabelInline(props, ref) {
const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpdateLabelInline(
{ labelForm, setLabelForm, isUpdating, labelToUpdate },
ref
) {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -58,6 +58,12 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
defaultValues,
});
const handleClose = () => {
setLabelForm(false);
reset(defaultValues);
if (onClose) onClose();
};
const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
@ -69,8 +75,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
(prevData) => [res, ...(prevData ?? [])],
false
);
reset(defaultValues);
setLabelForm(false);
handleClose();
});
};
@ -93,7 +98,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
false
);
setLabelForm(false);
handleClose();
});
};
@ -113,6 +118,18 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
setValue("name", labelToUpdate.name);
}, [labelToUpdate, setValue]);
useEffect(() => {
if (labelToUpdate) {
setValue(
"color",
labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
);
return;
}
setValue("color", getRandomLabelColor());
}, [labelToUpdate, setValue]);
return (
<div
className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5 ${
@ -157,7 +174,11 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
name="color"
control={control}
render={({ field: { value, onChange } }) => (
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
<TwitterPicker
colors={LABEL_COLOR_OPTIONS}
color={value}
onChange={(value) => onChange(value.hex)}
/>
)}
/>
</Popover.Panel>
@ -179,14 +200,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
error={errors.name}
/>
</div>
<SecondaryButton
onClick={() => {
reset();
setLabelForm(false);
}}
>
Cancel
</SecondaryButton>
<SecondaryButton onClick={() => handleClose()}>Cancel</SecondaryButton>
{isUpdating ? (
<PrimaryButton onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
{isSubmitting ? "Updating" : "Update"}
@ -198,4 +212,5 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
)}
</div>
);
});
}
);

17
apps/app/constants/label.ts Normal file
View File

@ -0,0 +1,17 @@
export const LABEL_COLOR_OPTIONS = [
"#FF6900",
"#FCB900",
"#7BDCB5",
"#00D084",
"#8ED1FC",
"#0693E3",
"#ABB8C3",
"#EB144C",
"#F78DA7",
"#9900EF",
];
export const getRandomLabelColor = () => {
const randomIndex = Math.floor(Math.random() * LABEL_COLOR_OPTIONS.length);
return LABEL_COLOR_OPTIONS[randomIndex];
};

5
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View File

@ -133,6 +133,11 @@ const LabelsSettings: NextPage = () => {
setLabelForm={setLabelForm}
isUpdating={isUpdating}
labelToUpdate={labelToUpdate}
onClose={() => {
setLabelForm(false);
setIsUpdating(false);
setLabelToUpdate(null);
}}
ref={scrollToRef}
/>
)}