Refactoring Phase 1 (#199)
* style: added cta at the bottom of sidebar, added missing icons as well, showing dynamic workspace member count on workspace dropdown * refractor: running parallel request, made create/edit label function to async function * fix: sidebar dropdown content going below kanban items outside click detection in need help dropdown * refractor: making parallel api calls fix: create state input comes at bottom, create state input gets on focus automatically, form is getting submitted on enter click * refactoring file structure and signin page * style: changed text and added spinner for signing in loading * refractor: removed unused type * fix: my issue cta in profile page sending to 404 page * fix: added new s3 bucket url in next.config.js file increased image modal height * packaging UI components * eslint config * eslint fixes * refactoring changes * build fixes * minor fixes * adding todo comments for reference * refactor: cleared unused imports and re ordered imports * refactor: removed unused imports * fix: added workspace argument to useissues hook * refactor: removed api-routes file, unnecessary constants * refactor: created helpers folder, removed unnecessary constants * refactor: new context for issue view * refactoring issues page * build fixes * refactoring * refactor: create issue modal * refactor: module ui * fix: sub-issues mutation * fix: create more option in create issue modal * description form debounce issue * refactor: global component for assignees list * fix: link module interface * fix: priority icons and sub-issues count added * fix: cycle mutation in issue details page * fix: remove issue from cycle mutation * fix: create issue modal in home page * fix: removed unnecessary props * fix: updated create issue form status * fix: settings auth breaking * refactor: issue details page Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: venkatesh-soulpage <venkatesh.marreboyina@soulpageit.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
This commit is contained in:
sriram veeraghanta
GitHub
parent
9134b0c543
commit
9075f9441c
322 changed files with 14149 additions and 21378 deletions
135
apps/app/components/cycles/form.tsx
Normal file
135
apps/app/components/cycles/form.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import { FC } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// components
|
||||
import { Button, Input, TextArea, CustomSelect } from "components/ui";
|
||||
// types
|
||||
import type { ICycle } from "types";
|
||||
|
||||
const defaultValues: Partial<ICycle> = {
|
||||
name: "",
|
||||
description: "",
|
||||
status: "draft",
|
||||
start_date: new Date().toString(),
|
||||
end_date: new Date().toString(),
|
||||
};
|
||||
|
||||
export interface CycleFormProps {
|
||||
handleFormSubmit: (values: Partial<ICycle>) => void;
|
||||
handleFormCancel?: () => void;
|
||||
initialData?: Partial<ICycle>;
|
||||
}
|
||||
|
||||
export const CycleForm: FC<CycleFormProps> = (props) => {
|
||||
const { handleFormSubmit, handleFormCancel = () => {}, initialData = null } = props;
|
||||
// form handler
|
||||
const {
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
control,
|
||||
} = useForm<ICycle>({
|
||||
defaultValues: initialData || defaultValues,
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Input
|
||||
id="name"
|
||||
label="Name"
|
||||
name="name"
|
||||
type="name"
|
||||
placeholder="Enter name"
|
||||
autoComplete="off"
|
||||
error={errors.name}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Name is required",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TextArea
|
||||
id="description"
|
||||
name="description"
|
||||
label="Description"
|
||||
placeholder="Enter description"
|
||||
error={errors.description}
|
||||
register={register}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h6 className="text-gray-500">Status</h6>
|
||||
<Controller
|
||||
name="status"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<CustomSelect
|
||||
{...field}
|
||||
label={<span className="capitalize">{field.value ?? "Select Status"}</span>}
|
||||
input
|
||||
>
|
||||
{[
|
||||
{ label: "Draft", value: "draft" },
|
||||
{ label: "Started", value: "started" },
|
||||
{ label: "Completed", value: "completed" },
|
||||
].map((item) => (
|
||||
<CustomSelect.Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-x-2">
|
||||
<div className="w-full">
|
||||
<Input
|
||||
id="start_date"
|
||||
label="Start Date"
|
||||
name="start_date"
|
||||
type="date"
|
||||
placeholder="Enter start date"
|
||||
error={errors.start_date}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Start date is required",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<Input
|
||||
id="end_date"
|
||||
label="End Date"
|
||||
name="end_date"
|
||||
type="date"
|
||||
placeholder="Enter end date"
|
||||
error={errors.end_date}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "End date is required",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<Button theme="secondary" onClick={handleFormCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{initialData
|
||||
? isSubmitting
|
||||
? "Updating Cycle..."
|
||||
: "Update Cycle"
|
||||
: isSubmitting
|
||||
? "Creating Cycle..."
|
||||
: "Create Cycle"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
3
apps/app/components/cycles/index.ts
Normal file
3
apps/app/components/cycles/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export * from "./modal";
|
||||
export * from "./select";
|
||||
export * from "./form";
|
||||
112
apps/app/components/cycles/modal.tsx
Normal file
112
apps/app/components/cycles/modal.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import { Fragment } from "react";
|
||||
import { mutate } from "swr";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import cycleService from "services/cycles.service";
|
||||
// components
|
||||
import { CycleForm } from "components/cycles";
|
||||
// helpers
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
// types
|
||||
import type { ICycle } from "types";
|
||||
// fetch keys
|
||||
import { CYCLE_LIST } from "constants/fetch-keys";
|
||||
|
||||
export interface CycleModalProps {
|
||||
isOpen: boolean;
|
||||
handleClose: () => void;
|
||||
projectId: string;
|
||||
workspaceSlug: string;
|
||||
initialData?: ICycle;
|
||||
}
|
||||
|
||||
export const CycleModal: React.FC<CycleModalProps> = (props) => {
|
||||
const { isOpen, handleClose, initialData, projectId, workspaceSlug } = props;
|
||||
|
||||
const createCycle = (payload: Partial<ICycle>) => {
|
||||
cycleService
|
||||
.createCycle(workspaceSlug as string, projectId, payload)
|
||||
.then((res) => {
|
||||
mutate(CYCLE_LIST(projectId));
|
||||
handleClose();
|
||||
})
|
||||
.catch((err) => {
|
||||
// TODO: Handle this ERROR.
|
||||
// Object.keys(err).map((key) => {
|
||||
// setError(key as keyof typeof defaultValues, {
|
||||
// message: err[key].join(", "),
|
||||
// });
|
||||
// });
|
||||
});
|
||||
};
|
||||
|
||||
const updateCycle = (cycleId: string, payload: Partial<ICycle>) => {
|
||||
cycleService
|
||||
.updateCycle(workspaceSlug, projectId, cycleId, payload)
|
||||
.then((res) => {
|
||||
mutate(CYCLE_LIST(projectId));
|
||||
handleClose();
|
||||
})
|
||||
.catch((err) => {
|
||||
// TODO: Handle this ERROR.
|
||||
// Object.keys(err).map((key) => {
|
||||
// setError(key as keyof typeof defaultValues, {
|
||||
// message: err[key].join(", "),
|
||||
// });
|
||||
// });
|
||||
});
|
||||
};
|
||||
|
||||
const handleFormSubmit = (formValues: Partial<ICycle>) => {
|
||||
if (workspaceSlug && projectId) {
|
||||
const payload = {
|
||||
...formValues,
|
||||
start_date: formValues.start_date ? renderDateFormat(formValues.start_date) : null,
|
||||
end_date: formValues.end_date ? renderDateFormat(formValues.end_date) : null,
|
||||
};
|
||||
if (initialData) {
|
||||
updateCycle(initialData.id, payload);
|
||||
} else {
|
||||
createCycle(payload);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</Transition.Child>
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
{initialData ? "Update" : "Create"} Cycle
|
||||
</Dialog.Title>
|
||||
<CycleForm handleFormSubmit={handleFormSubmit} handleFormCancel={handleClose} />
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
131
apps/app/components/cycles/select.tsx
Normal file
131
apps/app/components/cycles/select.tsx
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { PlusIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
|
||||
// services
|
||||
import cycleServices from "services/cycles.service";
|
||||
// components
|
||||
import { CycleModal } from "components/cycles";
|
||||
// fetch-keys
|
||||
import { CYCLE_LIST } from "constants/fetch-keys";
|
||||
|
||||
export type IssueCycleSelectProps = {
|
||||
projectId: string;
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
multiple?: boolean;
|
||||
};
|
||||
|
||||
export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
|
||||
projectId,
|
||||
value,
|
||||
onChange,
|
||||
multiple = false,
|
||||
}) => {
|
||||
// states
|
||||
const [isCycleModalActive, setCycleModalActive] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: cycles } = useSWR(
|
||||
workspaceSlug && projectId ? CYCLE_LIST(projectId) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => cycleServices.getCycles(workspaceSlug as string, projectId)
|
||||
: null
|
||||
);
|
||||
|
||||
const options = cycles?.map((cycle) => ({ value: cycle.id, display: cycle.name }));
|
||||
|
||||
const openCycleModal = () => {
|
||||
setCycleModalActive(true);
|
||||
};
|
||||
|
||||
const closeCycleModal = () => {
|
||||
setCycleModalActive(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<CycleModal
|
||||
isOpen={isCycleModalActive}
|
||||
handleClose={closeCycleModal}
|
||||
projectId={projectId}
|
||||
workspaceSlug={workspaceSlug as string}
|
||||
/>
|
||||
<Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button
|
||||
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||
>
|
||||
<ArrowPathIcon className="h-3 w-3 text-gray-500" />
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
|
||||
</div>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
>
|
||||
<div className="py-1">
|
||||
{options ? (
|
||||
options.length > 0 ? (
|
||||
options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.value}
|
||||
className={({ selected, active }) =>
|
||||
`${
|
||||
selected ||
|
||||
(Array.isArray(value)
|
||||
? value.includes(option.value)
|
||||
: value === option.value)
|
||||
? "bg-indigo-50 font-medium"
|
||||
: ""
|
||||
} ${
|
||||
active ? "bg-indigo-50" : ""
|
||||
} relative cursor-pointer select-none p-2 text-gray-900`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
<span className={` flex items-center gap-2 truncate`}>
|
||||
{option.display}
|
||||
</span>
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-sm text-gray-500">No options</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-sm text-gray-500">Loading...</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-gray-900"
|
||||
onClick={openCycleModal}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
|
||||
<span>Create cycle</span>
|
||||
</button>
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue