shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure correct label colour when creating a new label

Browse Source
This commit is contained in:
Henry
2024-08-13 23:13:38 +01:00
parent ccdbd9fa14
commit 04c6576228
1 changed files with 111 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/views/card/components/NewLabelForm.tsx
View File

@@ -1,16 +1,13 @@
import { Fragment, useState } from "react"; import { Fragment } from "react";
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import { HiChevronUpDown, HiXMark } from "react-icons/hi2"; import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
import { useModal } from "~/providers/modal"; import { useModal } from "~/providers/modal";
import { useForm, Controller } from "react-hook-form";
import { Formik, Form, Field } from "formik";
interface FormValues { interface FormValues {
name: string; name: string;
colour: Colour | undefined; colour: Colour;
} }
interface Colour { interface Colour {
@@ -18,7 +15,7 @@ interface Colour {
code: string; code: string;
} }
interface cardPublicId { interface CardPublicId {
cardPublicId: string; cardPublicId: string;
} }
@@ -33,11 +30,17 @@ const colours = [
{ name: "Pink", code: "#db2777" }, { name: "Pink", code: "#db2777" },
]; ];
export function NewLabelForm({ cardPublicId }: cardPublicId) { export function NewLabelForm({ cardPublicId }: CardPublicId) {
const [selected, setSelected] = useState(colours[0]);
const utils = api.useUtils(); const utils = api.useUtils();
const { closeModal } = useModal(); const { closeModal } = useModal();
const { control, handleSubmit } = useForm<FormValues>({
defaultValues: {
name: "",
colour: colours[0],
},
});
const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId }); const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
const createLabel = api.label.create.useMutation({ const createLabel = api.label.create.useMutation({
@@ -51,6 +54,16 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
}, },
}); });
const onSubmit = (values: FormValues) => {
if (!values.colour?.code) return;
createLabel.mutate({
name: values.name,
cardPublicId,
colourCode: values.colour.code,
});
};
return ( return (
<div className="p-5"> <div className="p-5">
<div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000"> <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
@@ -63,101 +76,97 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
</button> </button>
</div> </div>
<Formik <form onSubmit={handleSubmit(onSubmit)}>
initialValues={{ <label
name: "", htmlFor="name"
colour: colours[0], className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
}} >
onSubmit={(values: FormValues) => { Name
if (!values.colour?.code) return; </label>
<Controller
createLabel.mutate({ name="name"
name: values.name, control={control}
cardPublicId, render={({ field }) => (
colourCode: values.colour.code, <input
}); {...field}
}} id="name"
> className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
<Form> />
<label )}
htmlFor="name" />
className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000" <Controller
> name="colour"
Name control={control}
</label> render={({ field }) => (
<Field <Listbox {...field}>
id="name" {({ open }) => (
name="name" <>
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6" <div className="relative mt-4">
/> <Listbox.Button className="block w-full rounded-md border-0 bg-white/5 px-4 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
<Listbox value={selected} onChange={setSelected}> <span className="flex items-center">
{({ open }) => ( <span
<> style={{ backgroundColor: field.value?.code }}
<div className="relative mt-4"> className={`inline-block h-2 w-2 flex-shrink-0 rounded-full`}
<Listbox.Button className="block w-full rounded-md border-0 bg-white/5 px-4 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"> />
<span className="flex items-center"> <span className="ml-3 block truncate">
<span {field.value?.name}
style={{ backgroundColor: selected?.code }} </span>
className={`inline-block h-2 w-2 flex-shrink-0 rounded-full`}
/>
<span className="ml-3 block truncate">
{selected?.name}
</span> </span>
</span> <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <HiChevronUpDown
<HiChevronUpDown className="h-5 w-5 text-gray-400"
className="h-5 w-5 text-gray-400" aria-hidden="true"
aria-hidden="true" />
/> </span>
</span> </Listbox.Button>
</Listbox.Button>
<Transition <Transition
show={open} show={open}
as={Fragment} as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-dark-300 sm:text-sm"> <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-dark-300 sm:text-sm">
{colours.map((colour, index) => ( {colours.map((colour, index) => (
<Listbox.Option <Listbox.Option
key={`colours_${index}`} key={`colours_${index}`}
className="relative cursor-default select-none px-2 text-neutral-900 dark:text-dark-1000 " className="relative cursor-default select-none px-2 text-neutral-900 dark:text-dark-1000 "
value={colour} value={colour}
> >
{() => ( {() => (
<> <>
<div className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-400"> <div className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-400">
<span <span
style={{ backgroundColor: colour?.code }} style={{ backgroundColor: colour?.code }}
className="ml-2 inline-block h-2 w-2 flex-shrink-0 rounded-full" className="ml-2 inline-block h-2 w-2 flex-shrink-0 rounded-full"
aria-hidden="true" aria-hidden="true"
/> />
<span className="ml-3 block truncate font-normal"> <span className="ml-3 block truncate font-normal">
{colour.name} {colour.name}
</span> </span>
</div> </div>
</> </>
)} )}
</Listbox.Option> </Listbox.Option>
))} ))}
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>
</div> </div>
</> </>
)} )}
</Listbox> </Listbox>
<div className="mt-5 sm:mt-6"> )}
<button />
type="submit" <div className="mt-5 sm:mt-6">
className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50" <button
> type="submit"
Create label className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
</button> >
</div> Create label
</Form> </button>
</Formik> </div>
</form>
</div> </div>
); );
} }