Skip to content

Commit

Permalink
Merge pull request #196 from makeplane/refactor/create_issue_modal
Browse files Browse the repository at this point in the history 
fix: create issue modal
  • Loading branch information
@sriramveeraghanta
sriramveeraghanta authored Jan 26, 2023
2 parents 5671077 + 67da0c7 commit 79fd7b6
Show file tree
Hide file tree
Showing 18 changed files with 114 additions and 139 deletions.
1 change: 0 additions & 1 deletion apps/app/components/command-palette/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,6 @@ const CommandPalette: React.FC = () => {
<CreateUpdateIssueModal
isOpen={isIssueModalOpen}
handleClose={() => setIsIssueModalOpen(false)}
projectId={projectId as string}
/>
<BulkDeleteIssuesModal
isOpen={isBulkDeleteIssuesModalOpen}
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/cycles/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const CycleModal: React.FC<CycleModalProps> = (props) => {

return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-30" onClose={handleClose}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
Expand All @@ -86,7 +86,7 @@ export const CycleModal: React.FC<CycleModalProps> = (props) => {
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<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}
Expand Down
31 changes: 20 additions & 11 deletions apps/app/components/issues/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,26 @@ const defaultValues: Partial<IIssue> = {

export interface IssueFormProps {
handleFormSubmit: (values: Partial<IIssue>) => void;
projectId: string;
initialData?: Partial<IIssue>;
issues: IIssue[];
projectId: string;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
createMore: boolean;
setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
handleClose: () => void;
status: boolean;
}

export const IssueForm: FC<IssueFormProps> = ({
handleFormSubmit,
initialData,
issues = [],
projectId,
setActiveProject,
createMore,
setCreateMore,
handleClose,
status,
}) => {
// states
const [mostSimilarIssue, setMostSimilarIssue] = useState<IIssue | undefined>();
Expand Down Expand Up @@ -141,11 +145,15 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control}
name="project"
render={({ field: { value, onChange } }) => (
<IssueProjectSelect value={value} onChange={onChange} />
<IssueProjectSelect
value={value}
onChange={onChange}
setActiveProject={setActiveProject}
/>
)}
/>
<h3 className="text-lg font-medium leading-6 text-gray-900">
{initialData ? "Update" : "Create"} Issue
{status ? "Update" : "Create"} Issue
</h3>
</div>
{watch("parent") && watch("parent") !== "" ? (
Expand Down Expand Up @@ -245,18 +253,19 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control}
name="state"
render={({ field: { value, onChange } }) => (
<IssueStateSelect setIsOpen={setStateModal} value={value} onChange={onChange} />
<IssueStateSelect
setIsOpen={setStateModal}
value={value}
onChange={onChange}
projectId={projectId}
/>
)}
/>
<Controller
control={control}
name="cycle"
render={({ field: { value, onChange } }) => (
<IssueCycleSelect
projectId={projectId as string}
value={value}
onChange={onChange}
/>
<IssueCycleSelect projectId={projectId} value={value} onChange={onChange} />
)}
/>
<Controller
Expand All @@ -277,7 +286,7 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control}
name="labels_list"
render={({ field: { value, onChange } }) => (
<IssueLabelSelect value={value} onChange={onChange} />
<IssueLabelSelect value={value} onChange={onChange} projectId={projectId} />
)}
/>
<Controller
Expand Down Expand Up @@ -357,7 +366,7 @@ export const IssueForm: FC<IssueFormProps> = ({
Discard
</Button>
<Button type="submit" disabled={isSubmitting}>
{initialData
{status
? isSubmitting
? "Updating Issue..."
: "Update Issue"
Expand Down
126 changes: 55 additions & 71 deletions apps/app/components/issues/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import {
export interface IssuesModalProps {
isOpen: boolean;
handleClose: () => void;
projectId: string;
data?: IIssue | null;
prePopulateData?: Partial<IIssue>;
isUpdatingSingleIssue?: boolean;
Expand All @@ -47,26 +46,25 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
isOpen,
handleClose,
data,
projectId,
prePopulateData,
isUpdatingSingleIssue = false,
}) => {
// states
const [createMore, setCreateMore] = useState(false);
const [isCycleModalOpen, setIsCycleModalOpen] = useState(false);
const [isStateModalOpen, setIsStateModalOpen] = useState(false);
const [activeProject, setActiveProject] = useState<string | null>(null);

const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, projectId } = router.query;

const { user } = useUser();
const { setToastAlert } = useToast();

const { data: issues } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId) : null,
workspaceSlug && projectId
? () => issuesService.getIssues(workspaceSlug as string, projectId)
workspaceSlug && activeProject
? PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? "")
: null,
workspaceSlug && activeProject
? () => issuesService.getIssues(workspaceSlug as string, activeProject ?? "")
: null
);

Expand All @@ -89,7 +87,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
if (!workspaceSlug || !projectId) return;

await issuesService
.addIssueToCycle(workspaceSlug as string, projectId, cycleId, {
.addIssueToCycle(workspaceSlug as string, activeProject ?? "", cycleId, {
issues: [issueId],
})
.then((res) => {
Expand All @@ -102,7 +100,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
);
} else
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((issue) => {
Expand All @@ -122,7 +120,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
if (!workspaceSlug || !projectId) return;

await modulesService
.addIssuesToModule(workspaceSlug as string, projectId, moduleId as string, {
.addIssuesToModule(workspaceSlug as string, activeProject ?? "", moduleId as string, {
issues: [issueId],
})
.then((res) => {
Expand All @@ -134,9 +132,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({

const createIssue = async (payload: Partial<IIssue>) => {
await issuesService
.createIssues(workspaceSlug as string, projectId as string, payload)
.createIssues(workspaceSlug as string, activeProject ?? "", payload)
.then((res) => {
mutate<IssueResponse>(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
mutate<IssueResponse>(PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""));

if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
Expand Down Expand Up @@ -174,13 +172,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({

const updateIssue = async (payload: Partial<IIssue>) => {
await issuesService
.updateIssue(workspaceSlug as string, projectId as string, data?.id ?? "", payload)
.updateIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload)
.then((res) => {
if (isUpdatingSingleIssue) {
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
} else
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((issue) => {
Expand Down Expand Up @@ -208,7 +206,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
};

const handleFormSubmit = async (formData: Partial<IIssue>) => {
if (workspaceSlug && projectId) {
if (workspaceSlug && activeProject) {
const payload: Partial<IIssue> = {
...formData,
target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null,
Expand All @@ -220,62 +218,48 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
};

return (
<>
{projectId && (
<>
<CreateUpdateStateModal
isOpen={isStateModalOpen}
handleClose={() => setIsStateModalOpen(false)}
projectId={projectId}
/>
<CreateUpdateCycleModal
isOpen={isCycleModalOpen}
setIsOpen={setIsCycleModalOpen}
projectId={projectId}
/>
</>
)}
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={React.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>
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={React.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-10 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.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 rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<IssueForm
projectId={projectId}
issues={issues?.results ?? []}
handleFormSubmit={handleFormSubmit}
initialData={prePopulateData}
createMore={createMore}
setCreateMore={setCreateMore}
handleClose={handleClose}
/>
</Dialog.Panel>
</Transition.Child>
</div>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.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 rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<IssueForm
issues={issues?.results ?? []}
handleFormSubmit={handleFormSubmit}
initialData={prePopulateData}
createMore={createMore}
setCreateMore={setCreateMore}
handleClose={handleClose}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
status={data ? true : false}
/>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
</>
</div>
</Dialog>
</Transition.Root>
);
};
9 changes: 5 additions & 4 deletions apps/app/components/issues/select/label.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,26 @@ import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
value: string[];
onChange: (value: string[]) => void;
projectId: string;
};

const defaultValues: Partial<IIssueLabels> = {
name: "",
};

export const IssueLabelSelect: React.FC<Props> = ({ value, onChange }) => {
export const IssueLabelSelect: React.FC<Props> = ({ value, onChange, projectId }) => {
// states
const [query, setQuery] = useState("");

const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;

const [isOpen, setIsOpen] = useState(false);

const { data: issueLabels, mutate: issueLabelsMutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(workspaceSlug as string) : null,
projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
workspaceSlug && projectId
? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId)
: null
);

Expand Down
15 changes: 13 additions & 2 deletions apps/app/components/issues/select/project.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,14 @@ import { PROJECTS_LIST } from "constants/fetch-keys";
export interface IssueProjectSelectProps {
value: string;
onChange: (value: string) => void;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
}

export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({ value, onChange }) => {
export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({
value,
onChange,
setActiveProject,
}) => {
const router = useRouter();
const { workspaceSlug } = router.query;

Expand All @@ -30,7 +35,13 @@ export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({ value, onChang

return (
<>
<Listbox value={value} onChange={onChange}>
<Listbox
value={value}
onChange={(val) => {
onChange(val);
setActiveProject(val);
}}
>
{({ open }) => (
<>
<div className="relative">
Expand Down
Loading

0 comments on commit 79fd7b6

Please sign in to comment.