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

style: project select dropdown & modals ui improvement (#2491)

Browse source 
* style: project select dropdown ui improvement

* style: create/update cycle modal ui improvement

* style: create/update module modal ui improvement

* fix: build error

* style: input and textarea border improvement

* cycle and module modal ui improvement

* style: cycle and module modal ui improvement
This commit is contained in:
Anmol Singh Bhatia 2023-10-19 16:38:36 +05:30 • committed by GitHub
parent 082e48c9cf
commit fda0a6791f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 340 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

132
web/components/cycles/form.tsx
View file

@ -2,17 +2,20 @@ import { Controller, useForm } from "react-hook-form";
// ui
import { Button, Input, TextArea } from "@plane/ui";
import { DateSelect } from "components/ui";
import { IssueProjectSelect } from "components/issues/select";
// types
import { ICycle } from "types";
type Props = {
handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
handleClose: () => void;
projectId: string;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
data?: ICycle | null;
};
export const CycleForm: React.FC<Props> = (props) => {
const { handleFormSubmit, handleClose, data } = props;
const { handleFormSubmit, handleClose, projectId, setActiveProject, data } = props;
// form data
const {
formState: { errors, isSubmitting },
@ -21,6 +24,7 @@ export const CycleForm: React.FC<Props> = (props) => {
watch,
} = useForm<ICycle>({
defaultValues: {
project: projectId,
name: data?.name || "",
description: data?.description || "",
start_date: data?.start_date || null,
@ -40,80 +44,98 @@ export const CycleForm: React.FC<Props> = (props) => {
return (
<form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Cycle</h3>
<div className="flex items-center gap-x-3">
<Controller
control={control}
name="project"
render={({ field: { value, onChange } }) => (
<IssueProjectSelect
value={value}
onChange={(val: string) => {
onChange(val);
setActiveProject(val);
}}
/>
)}
/>
<h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Cycle</h3>
</div>
<div className="space-y-3">
<div>
<Controller
name="name"
control={control}
rules={{
required: "Name is required",
maxLength: {
value: 255,
message: "Name should be less than 255 characters",
},
}}
render={({ field: { value, onChange } }) => (
<Input
id="cycle_name"
name="name"
type="text"
placeholder="Cycle Name"
className="resize-none text-xl w-full p-2"
value={value}
onChange={onChange}
hasError={Boolean(errors?.name)}
/>
)}
/>
</div>
<div>
<Controller
name="description"
control={control}
render={({ field: { value, onChange } }) => (
<TextArea
id="cycle_description"
name="description"
placeholder="Description"
className="h-32 resize-none text-sm"
hasError={Boolean(errors?.description)}
value={value}
onChange={onChange}
/>
)}
/>
</div>
<div className="flex flex-wrap items-center gap-2">
<div className="mt-2 space-y-3">
<div>
<Controller
name="name"
control={control}
name="start_date"
rules={{
required: "Name is required",
maxLength: {
value: 255,
message: "Name should be less than 255 characters",
},
}}
render={({ field: { value, onChange } }) => (
<DateSelect
label="Start date"
<Input
id="cycle_name"
name="name"
type="text"
placeholder="Cycle Title"
className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
value={value}
onChange={(val) => onChange(val)}
minDate={new Date()}
maxDate={maxDate ?? undefined}
inputSize="md"
onChange={onChange}
hasError={Boolean(errors?.name)}
/>
)}
/>
</div>
<div>
<Controller
name="description"
control={control}
name="end_date"
render={({ field: { value, onChange } }) => (
<DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
<TextArea
id="cycle_description"
name="description"
placeholder="Description..."
className="h-24 w-full resize-none text-sm"
hasError={Boolean(errors?.description)}
value={value}
onChange={onChange}
/>
)}
/>
</div>
<div className="flex flex-wrap items-center gap-2">
<div>
<Controller
control={control}
name="start_date"
render={({ field: { value, onChange } }) => (
<DateSelect
label="Start date"
value={value}
onChange={(val) => onChange(val)}
minDate={new Date()}
maxDate={maxDate ?? undefined}
/>
)}
/>
</div>
<div>
<Controller
control={control}
name="end_date"
render={({ field: { value, onChange } }) => (
<DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
)}
/>
</div>
</div>
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
<div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200 ">
<Button variant="neutral-primary" onClick={handleClose}>
Cancel
</Button>