github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: create cycle modal makeover (#617)

Browse Source
This commit is contained in:
Saheb Giri 2023-03-30 18:35:29 +05:30 committed by GitHub
parent 624d9dfd39
commit 4d56adba43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 137 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
apps/app/components/cycles/date.tsx Normal file
View File

@ -0,0 +1,71 @@
import React from "react";
import { Popover, Transition } from "@headlessui/react";
import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
// react-datepicker
import DatePicker from "react-datepicker";
// import "react-datepicker/dist/react-datepicker.css";
import { renderDateFormat } from "helpers/date-time.helper";
type Props = {
value: string | null;
onChange: (val: string | null) => void;
label: string;
};
export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
<Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => (
<>
<Popover.Button
className={({ open }) =>
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
${
open
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
: "hover:bg-theme/5 "
}`
}
>
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
{value ? (
<>
<span className="text-gray-600">{value}</span>
<button onClick={() => onChange(null)}>
<XMarkIcon className="h-3 w-3 text-gray-600" />
</button>
</>
) : (
<>
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-gray-500" />
<span className="text-gray-500">{label}</span>
</>
)}
</span>
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute top-10 -left-10 z-20 transform overflow-hidden">
<DatePicker
selected={value ? new Date(value) : null}
onChange={(val) => {
if (!val) onChange("");
else onChange(renderDateFormat(val));
}}
dateFormat="dd-MM-yyyy"
inline
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
);

141
apps/app/components/cycles/form.tsx
View File

@ -9,7 +9,8 @@ import cyclesService from "services/cycles.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomDatePicker, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
import { DateSelect } from "components/cycles";
// helpers // helpers
import { getDateRangeStatus, isDateRangeValid } from "helpers/date-time.helper"; import { getDateRangeStatus, isDateRangeValid } from "helpers/date-time.helper";
// types // types
@ -100,12 +101,13 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<Input <Input
mode="transparent"
autoComplete="off"
id="name" id="name"
label="Name"
name="name" name="name"
type="name" type="name"
placeholder="Enter name" className="resize-none text-xl"
autoComplete="off" placeholder="Title"
error={errors.name} error={errors.name}
register={register} register={register}
validations={{ validations={{
@ -121,94 +123,81 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
<TextArea <TextArea
id="description" id="description"
name="description" name="description"
label="Description" placeholder="Description"
placeholder="Enter description" className="h-32 resize-none text-sm"
mode="transparent"
error={errors.description} error={errors.description}
register={register} register={register}
/> />
</div> </div>
<div className="flex gap-x-2"> <div className="flex flex-wrap items-center gap-2">
<div className="w-full"> <div>
<h6 className="text-gray-500">Start Date</h6> <Controller
<div className="w-full"> control={control}
<Controller name="start_date"
control={control} render={({ field: { value, onChange } }) => (
name="start_date" <DateSelect
render={({ field: { value, onChange } }) => ( label="Start date"
<CustomDatePicker value={value}
renderAs="input" onChange={(val) => {
value={value} onChange(val);
onChange={(val) => { if (val && watch("end_date")) {
onChange(val); if (isDateRangeValid(val, `${watch("end_date")}`)) {
if (val && watch("end_date")) { cycleStatus != "current" &&
if (isDateRangeValid(val, `${watch("end_date")}`)) { dateChecker({
cycleStatus != "current" && start_date: val,
dateChecker({ end_date: watch("end_date"),
start_date: val,
end_date: watch("end_date"),
});
} else {
setIsDateValid(false);
setToastAlert({
type: "error",
title: "Error!",
message: "You have enter invalid date.",
}); });
} } else {
setIsDateValid(false);
setToastAlert({
type: "error",
title: "Error!",
message: "You have enter invalid date.",
});
} }
}} }
error={errors.start_date ? true : false} }}
/> />
)}
/>
{errors.start_date && (
<h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
)} )}
</div> />
</div> </div>
<div className="w-full"> <div>
<h6 className="text-gray-500">End Date</h6> <Controller
<div className="w-full"> control={control}
<Controller name="end_date"
control={control} render={({ field: { value, onChange } }) => (
name="end_date" <DateSelect
render={({ field: { value, onChange } }) => ( label="End date"
<CustomDatePicker value={value}
renderAs="input" onChange={(val) => {
value={value} onChange(val);
onChange={(val) => { if (watch("start_date") && val) {
onChange(val); if (isDateRangeValid(`${watch("start_date")}`, val)) {
if (watch("start_date") && val) { cycleStatus != "current" &&
if (isDateRangeValid(`${watch("start_date")}`, val)) { dateChecker({
cycleStatus != "current" && start_date: watch("start_date"),
dateChecker({ end_date: val,
start_date: watch("start_date"),
end_date: val,
});
} else {
setIsDateValid(false);
setToastAlert({
type: "error",
title: "Error!",
message: "You have enter invalid date.",
}); });
} } else {
setIsDateValid(false);
setToastAlert({
type: "error",
title: "Error!",
message: "You have enter invalid date.",
});
} }
}} }
error={errors.end_date ? true : false} }}
/> />
)}
/>
{errors.end_date && (
<h6 className="text-sm text-red-500">{errors.end_date.message}</h6>
)} )}
</div> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="mt-5 flex justify-end gap-2"> <div className="-mx-5 mt-5 flex justify-end gap-2 border-t px-5 pt-5">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton <PrimaryButton
type="submit" type="submit"

1
apps/app/components/cycles/index.ts
View File

@ -7,3 +7,4 @@ export * from "./select";
export * from "./sidebar"; export * from "./sidebar";
export * from "./single-cycle-card"; export * from "./single-cycle-card";
export * from "./empty-cycle"; export * from "./empty-cycle";
export * from "./date";